<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<script src="../bower_components/vue/dist/vue.js"></script>
	<script src="../bower_components/vue-router/dist/vue-router.js"></script>
	<style>
		.v-link-active{
			color: #f40;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><a v-link="{path:'/home'}">主页</a></li>
			<li><a v-link="{path:'/news'}">新闻</a></li>
		</ul>

		<div>
			<router-view></router-view>
		</div>
	</div>

	<script>
		// 1.准备一个根组件
		var App = Vue.extend();

		// 2.准备home和news组件
		var Home = Vue.extend({
			template: "<p>我是主页</p>"
		})

		var News = Vue.extend({
			template: "<p>我是新闻页</p>"
		})

		// 3.准备路由
		var router = new VueRouter();

		// 4.关联
		router.map({
			'home':{
				component: Home
			},
			'news':{
				component: News
			}
		});

		// 5.启动路由
		router.start(App, '#box');

		// 6.路由跳转
		router.redirect({
			'/':'/news'
		});
	</script>
</body>
</html>